analog clock - 1

 
          <div class="box">
            <div class="clock">
                <div id="hours"></div>
                <div id="minutes"></div>
                <div id="seconds"></div>
            </div>
          </div>
          <style>
          .box {position: relative; width: 45vw; height: 45vw; padding: 1vw; box-sizing: border-box; display: flex;
             flex-direction: column; justify-content: center; align-items: center;}
          .clock {position: relative; width: 30vw; height: 30vw; background-image:repeating-conic-gradient( orange 1deg,
             lightgreen 2deg, skyblue 3deg);background-position: center; background-repeat: no-repeat; 
             background-size: 30vw 30vw; border: 1vw outset burlywood; border-radius: 50%;}
          .clock::before {content: ""; position: absolute; top: 15vw; left: 15vw; width: 1vw; height: 1vw; 
              border-radius: 50%; background: red; z-index: 999;}
          #hours {position: absolute; top: 8vw; left: 15.2vw; width: 0.5vw; height: 8vw; 
            background: crimson; transform-origin: bottom;}
          #minutes {position: absolute; top: 5vw; left: 15.4vw; width: 0.3vw; height: 11vw; 
            background: orange; transform-origin: bottom;}
          #seconds {position: absolute; top: 2vw; left: 15.4vw; width: 0.2vw; height: 13.4vw; 
            background: black; transform-origin: bottom;}
          </style>
          <script>
            function startClock() {
              const hr = document.getElementById("hours");
              const min = document.getElementById("minutes");
              const sec = document.getElementById("seconds");

              let date = new Date();
              let hh = date.getHours();
              if(hh >= 12) {hh = hh - 12;}
              let mm = date.getMinutes();
              let ss = date.getSeconds();

              hr.style.transform = "rotateZ(" + (hh*30 + mm*0.5) + "deg)";
              min.style.transform = "rotateZ(" + mm*6 + "deg)";
              sec.style.transform = "rotateZ(" + ss*6 + "deg)";
            }

            window.addEventListener('load', (event) => {
              setInterval(startClock, 1000);
            });
          </script>